<template>
    <div class="quiz-qa" :style="{paddingBottom : `${paddingForX}rem`}">
		<y-nav title="超准！十道题看透你的爱情观" :shareData="shareData"></y-nav>
        <img src="../assets/quiz_q_bg.png" alt="" class="quiz-q-bg">
        <div class="quiz-question">{{quizData.question}}</div>
        <div class="quiz-a-wrap" :class="marginForX">
            <div class="quiz-a-item" v-for="(item, index) of quizData.answer" 
                :key="index" @touchstart="startTouch(item, index)" @touchend="endTouch"
            >
                <span class="quiz-a-order">{{item.answerId}}.</span>
                <div class="quiz-a-content-wrap">
                    <div class="quiz-a-content-common quiz-a-content-back" 
                    :class="[{'active-btn-back': selectedIndex == index}]"
                    >{{item.content}}</div>
                    <div class="quiz-a-content-common quiz-a-content" 
                    :class="[{'active-btn-front': selectedIndex == index}]"
                    :style="{marginLeft: `${-(0.83+item.content.length*0.5)}rem`}"
                    >{{item.content}}</div>
                </div>
            </div>
        </div>
        <img src="../assets/quiz_prev_q.png" alt="" class="quiz-prev-q" :class="{'hide': quizStack.length <= 1}" @click="toPrevQ">
    </div>
</template>
<script>
import quiz from './data/quiz.json';
import shareData from './data/shareData.js';
import Nav from '@/components/nav';
import code from './data/code.json';
export default {
	components: {
		[Nav.name]: Nav
	},
    data() {
        return {
            quizData: quiz[0],
            selectedIndex: null,
            selectedItem: {},
            quizItemIndex: 0,
			quizStack: [quiz[0]],
			shareData,
        }
    },
    methods: {
        startTouch(item, index) {
            this.selectedItem = item;
            this.selectedIndex = index;
            
        },
        endTouch() {
            let nextItemIndex = this.selectedItem.nextItem;
            if ( nextItemIndex > 0 && nextItemIndex <= 10 ) {
                this.quizData = quiz[nextItemIndex - 1];
				this.quizStack.push(this.quizData);
				this.selectedItem = {};
				this.selectedIndex = null;
            } else {
				nextItemIndex = nextItemIndex.toLowerCase();
				this.finishTest(nextItemIndex);
                setTimeout(() => {
					this.selectedItem = {};
					this.selectedIndex = null;
					this.$router.push(`/official-activity/quiz-result/${nextItemIndex}`);
				}, 1000)
            }
            
        },
        toPrevQ() {
            this.quizStack.pop();
            this.quizData = this.quizStack[this.quizStack.length - 1];
		},
		// 完成测试
		finishTest(nextItemIndex) {
			this.$http({
				url: '/lovelorn/v1.3/pt/activity-testing-infos',
				method: 'post',
				data: {
					activityCode: code.activityCode,
					answer: nextItemIndex
				}
			});
		},
	},
	computed: {
		marginForX() {
			return this.$utils.isIphoneX() ? 'marginForX' : '';
		},
		paddingForX() {
			return this.$utils.isIphoneX() ? '2.2' : '0.8';
		}
	},
    mounted() {
		
    }
}
</script>
<style>
.quiz-qa {
    background-image: url('../assets/quiz_qa_bg.png');
    background-size: cover;
    padding-bottom: .8rem;
	height: 100vh;

   & .hide{
       visibility: hidden;
   }
   
   & .quiz-q-bg{
       width: 6.41rem;
       height: 2.85rem;
       margin-left: 7%;
       margin-top: 10%;
   }
   & .quiz-prev-q{
       width: 2.6rem;
       height: 0.91rem;
       margin-top: 10%;
       margin-left: 52%;
   }
   & .quiz-question{
       font-size: 0.4rem;
       line-height: 0.58rem;
       font-weight: 700;
       width: 5.5rem;
       height: 1rem;
        margin-top: -27%;
        margin-left: 16%;
   }
   & .quiz-a-order{
       font-size: 0.58rem;
       font-weight: 800;
   }
   & .quiz-a-wrap{
       height: 5.2rem;
       margin-top: 20%;
       margin-left: .55rem;
   }
   & .marginForX{
		margin-top: 32%;
   }
   & .paddingForX{
		padding-bottom: 2.2rem;
	}
   & .quiz-a-item{
       display: flex;
       margin-top: .8rem;
       margin-bottom: -0.2rem;
   }
   & .quiz-a-content-wrap{
       display: flex;
        width: 86%;
        height: 1rem;
        margin-left: 5%;
        padding-top: 0.2rem;
   }
   & .quiz-a-content-common{
	  font-family: happyfont;
	  font-weight: bold;
       padding: 0 0.3rem;
       display: inline-block;
       border: 3px solid #000;
       height: 0.8rem;
   }
   & .quiz-a-content-back{
       background: #ffd605;
   }
   & .quiz-a-content{
       background: #fff;
       margin-top: -2%;
   }
    & .active-btn-front{
        background: #fa6166;
        color: #fff;
    }
    & .active-btn-back{
        background: #fff;
    }
}
</style>

